<!-- 收藏通知 -->
<template>
    <div class="box">
      <div class="search">
        <div class="search-input">
          <el-input
            placeholder="输入内容"
            v-model="input"
            clearable
            @keydown.enter="searchKeyWord"
            maxlength="20"
            show-word-limit
            />
        </div>
        <div class="search-search">
          <el-button type="primary" @click="searchKeyWord()">搜索</el-button>
        </div>
        <div class="search-add">
          <el-button type="danger" @click="delIsChecked()">全部删除</el-button>
        </div>
      </div>
  
      <div class="body" ref="wrap">
        <el-table 
          :data="dynamicList"
          border  
          :row-selection="true"
          @selection-change="selectionChange"
          v-loading="isShow" 
          style="width: 100%;height:100%" 
          empty-text=" "
          ref="multipleTable"
          height="100%"
          :row-style="{height: '50px'}"
          highlight-current-row
          >
          <el-table-column type="selection" width="50" />
          <el-table-column label="序号" width="60" :show-overflow-tooltip="true">
            <template #default="scope">
              {{(pageNum-1) * pageSize + scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column prop="nickname2" label="发表人" width="180" :show-overflow-tooltip="true"/>
          <el-table-column prop="nickname1" label="收藏人" width="180" :show-overflow-tooltip="true"/>
          <el-table-column prop="noticeCollectContent" label="收藏内容" :show-overflow-tooltip="true"/>
          <el-table-column prop="createTime" label="收藏时间" :show-overflow-tooltip="true" width="200"/>
          <el-table-column label="操作" :show-overflow-tooltip="true" align="center" width="200">
            <template #default="scope" >
              <div style="display:inline-block;">
                <el-button type="warning" @click="getNum(scope.$index, scope.row)" class="change" style="width:80%;height:40%">
                  修改 </el-button></div>
              <div style="display:inline-block;">
                <el-popconfirm title="是否删除？"  @confirm="dele(scope.row.noticeId)" >
                  <template #reference>
                      <el-button type="danger" class="delet" style="width:80%;height:40%">删除</el-button>
                    </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div class="bottom">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              @current-change="changePage"
              @prev-click="changePage"
              @next-click="changePage"
              :total="allPages"
          >
          </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  
  import {getAllNotice,getAllNotic,getUser} from "@/api/secondary_api/PageCollectNotice"
  
  export default {
  data(){
    return{
      isShow: true,
      dynamicList:[],//一页用户
      pageNum:1,//当前页
      pageSize:0,//每页显示的条数
      allPages:0,//一共多少页
      multipleSelection:[],//
      showInput:false,//
      input:"",//
    }
  },
  methods:{
    delIsChecked(){
  
    },
    searchKeyWord(){//
  
    },
    selectionChange(val) {//全选
        this.multipleSelection = val;
    },
    getNum(index,row){//
      console.log(index,row);
    },
    dele(id){//
      console.log(id)
    },
    changePage(e){//分页
      this.isShow = true;
      this.pageNum = e
      this.getAllNotices()
    },
    getAllNotices(){//分页查询
      getAllNotice().then(//
        response=>{
          this.allPages = response.data.length
      })
      getAllNotic(this.pageNum,this.pageSize).then(//
        response1=>{
          if(response1.code ==200){
            for(let i = 0;i<response1.data.length; i++){
              getUser(response1.data[i].userId).then(
                response=>{
                  Object.assign(response1.data[i],{'nickname1': response.data.nickname});
                }
              )
              getUser(response1.data[i].notifiedId).then(
                response=>{
                  Object.assign(response1.data[i],{'nickname2': response.data.nickname});
                }
              ) 
            }
            setTimeout(() => {
              this.dynamicList = response1.data
              this.isShow =false
            }, 500);
             
          }
      })
    },
    
  },
  mounted(){
    this.$nextTick(()=>{//计算每页显示多少条
        let $ele = this.$refs.wrap
        let height = $ele.offsetHeight
        this.pageSize = parseInt(height/50);
    })
    setTimeout(() => {
      this.getAllNotices()
    }, 200);
  },
  }
  </script>
  
  <style scoped>
  .box{
  width: 100%;
  height: 100%;
  padding: 1% 4%;
  box-sizing: border-box;
  }
  .search{
  width: 100%;
  height: 60px;
  line-height: 30px;
  }
  .search-input{
  width: 30%;
  height: 100%;
  float: left;
  }
  .search-search{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 20px;
  }
  .search-add{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 3%;
  }
  .search-input .el-input{
  height: 70% !important;
  font-size: 17px;
  }
  .search-search .el-button,.search-add .el-button{
  width: 90%;
  height:70%;
  font-size: 14px;
  }
  .body{
  width: 100%;
  height: 82%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-top: 10px;
  }
  .change{
  background-color: #ffb800;
  font-size: 13px !important;
}
.delet{
  background-color: red;
  font-size: 13px;
}
.change:hover,.delet:hover{
  opacity: 0.4;
}
  .bottom{
  margin-top: 15px;
  }
  </style>